@import "common.less";
@text-blue : #838fdf;
@text-red : #f97288;

.sign-up{
 min-height: 1400/@rem;position: relative;
  &:before {content: ''; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 50%; max-width:@sreen; margin-left:-250px; background: url("../img/bg-sign.jpg") #140f29 no-repeat; background-size: cover;}
  .head{position: absolute;top: 25/@rem;left: 54/@rem;right: 54/@rem;z-index: 1;}
  .content{position: absolute;top: 260/@rem;left: 54/@rem;right: 54/@rem;background-color: lighten(#4954a2,7.5%); z-index: 2;min-height: 960/@rem;border-radius: 10px;
    &.youth{
      background-color:lighten(#c5385b,3%);
      .form{
        .group{
          border-color:@text-red;
          input{
            &::-webkit-input-placeholder{color: @text-red;}
          }
        }
        .verify{
          .btn{background-color: #f89486;border-color: #f89486;}
        }
      }
      .confirm{background: url("../img/btn-bg-red.jpg") repeat-x;background-size: auto 100%;color: #9e2f3a;}
      .cont-success{
        & > *{border-top-color:#da4f6d;}
        .info{
          label{color: #f97288;}
        }
      }
      .imgupload{
        .img-ul{
          li{border-color: @text-red;
            &.add{background: url("../img/add-red.png") center center no-repeat;background-size: 82/@rem 82/@rem;}
          }
        }
        .txt{color: @text-red;}
      }
    }
    .title{
      height: 90/@rem;
      li{width: 50%;float: left;font-size: 20/@rem;text-align: center;height: 100%;
        .name{font-size: 36/@rem;margin-top: 2/@rem;}
        &.create{background: url("../img/title-blue.jpg") repeat-x;background-size: auto 100%;color: #c3c9ff;border-radius:10px 0 0 0;
          &.active{background: url("../img/title-blue-active.jpg") repeat-x;background-size: auto 100%;}
        }
        &.youth{background: url("../img/title-red.jpg") repeat-x;background-size: auto 100%;color: #ffd1d5;border-radius:0 10px 0 0;}
          &.active{background: url("../img/title-red-active.jpg") repeat-x;background-size: auto 100%;}
      }
    }
    .imgupload{height: 270/@rem;
      .img-ul{padding-top: 36/@rem;text-align: center;
        li{display: inline-block;width: 150/@rem;height: 150/@rem;border: 2px solid @text-blue;border-radius: 100%;overflow: hidden;margin-left: 20/@rem;
          &:first-child{margin-left: 0;}
          &.add{background: url("../img/add-blue.png") center center no-repeat;background-size: 82/@rem 82/@rem;}
          img{width: 100%;height: 100%;}
          .loading{
            width: 100%;height: 100%;line-height: 150/@rem;text-align: center;background-color: rgba(0,0,0,0.3);float: left;
            img{width: 60/@rem;height: 60/@rem;display: inline-block;vertical-align: middle;animation:circle 1s infinite linear;}
          }
        }
      }
      .txt{color: @text-blue;font-size: 22/@rem;margin-top: 14/@rem;text-align: center;}
    }

    .form{display: block;padding-bottom: 15/@rem;
      .group{
        margin: 0 58/@rem 20/@rem;height: 64/@rem;border: 1px solid @text-blue;border-radius: 30px;
        label{float: left;height: 100%;line-height: 64/@rem;width: 28%;text-align: right;font-weight: normal;color: #fff;font-size: 24/@rem;}
        input{float: left;width: 72%;height: 24/@rem;line-height: 24/@rem;padding: 20/@rem 0;background: none;border: none;color: @text-blue;font-size: 24/@rem;color: #fff;
          &::-webkit-input-placeholder{color: @text-blue;line-height: 30/@rem;}
        }
      }
      .verify{
        margin: 0 58/@rem 20/@rem;height: 64/@rem;
        .group{float: left;margin: 0;width: 65%;
          label{width: 43%;}
          input{width: 150/@rem;}
        }
        .btn{float: right;width: 30%;height: 64/@rem;line-height: 64/@rem;text-align: center;background-color: #86b9f8;border: 1px solid #86b9f8;color: #010000;border-radius: 30px;font-size: 24/@rem;}
      }
    }
    .confirm{margin: 0 58/@rem;text-align: center;height: 90/@rem;line-height: 90/@rem;color: #4240a5;font-size: 40/@rem;background: url("../img/btn-bg-blue.jpg") repeat-x;background-size: auto 100%;border-radius: 30px;}

    //报名成功
    .cont-success{
      margin: 30/@rem 40/@rem 0;
      & > *{border-top:1px solid #6872c6;
        &:first-child{border-top: none;}
      }
      h2{text-align: center;font-size: 50/@rem;font-weight: normal;color: #fff;padding-bottom: 20/@rem;}
      .headImg{padding: 18/@rem;
        .img-box{border: 10/@rem solid #fff;width: 504/@rem;height: 314/@rem;line-height: 314/@rem;text-align: center;}
        img{display: inline-block;max-height: 100%;max-width: 100%;}
      }
      .info{
        padding: 18/@rem 24/@rem;overflow: hidden;
        li{float: left;margin-left: 54/@rem;
          &:first-child{margin-left: 0;}
        }
        label{display: block;font-size: 22/@rem;color: #7883e1;}
        p{font-size: 24/@rem;color: #fff;margin-top: 4/@rem;}
      }
      .invate{margin: 15/@rem 0 0;border-radius: 15px;border-top: none;}
    }
  }
  .explain{
    height: 60/@rem;margin: 0 55/@rem;padding-top: 1210/@rem;color: #c8d9ff;
    .text{font-size: 24/@rem;line-height: 30/@rem;float: left;width: 70%;}
    .btn{float: right;width: 25%;height: 60/@rem;box-sizing: border-box;border: 1px solid #c8d9ff;border-radius: 30px;text-align: center;line-height: 60/@rem;color: inherit;}
  }
}

@keyframes circle{
  0%{ transform:rotate(0deg);}
  100%{ transform:rotate(360deg);}
}